<template>
	<view>
		<view class="search">
			<icon type="search" color="white" size="10"></icon>
			<input type="text" value="" placeholder="搜索商品" placeholder-class="placeholder"/>
		</view>
		<view class="list" v-if="productsList.length > 0">
			
			<view class="row" v-for="(item,index) of productsList"  :key="item.id" @click="_goToDetail(item.id)">
			<!-- <view class="row"> -->
				<image :src="item.img" mode="widthFix"></image>
				<view class="info">
					<text>{{item.goodsname}}</text>	
					<text>￥{{item.price}}</text>	
					<text>3565评论</text>	
				</view>
			</view>
			
		</view>
		<view class="tishi" v-if="!isMore">
			没有更多数据亲！
		</view>
	</view>
</template>

<script>
	import Http from '@/utils/http.js'
	
	import { apiurl } from '@/utils/config.js'
	
export default {
	data(){
		return {
			productsList:[],//按一级类别查询数据
			page:1,
			size:4,
			fid:3,//一级分类id，跳转到此页面传递过来的参数
			isMore:true,//有更多的数据
		}
	},
	mounted(){
		//this.size = 5
		console.log( this,'接收参数' )
		let { fid } = this.$mp.query
		this.fid = fid
		this._getProductsList()
	},
	
	onReachBottom(){
		this.page++
		this._getProductsList()
		console.log('下一页')
	},
	
	methods:{
		_goToDetail(id){
			uni.navigateTo({
				url:'../details/details?id='+id
			})
		},
		async _getProductsList(){
			// /api/getcategoodPage?fid=3&page=1&size=20
			let { page,size,fid } = this
			if( !this.isMore ){
				
				return
			}
			uni.showLoading({
				title:"正在请求..."
			})			
			let result = await Http({
				url:'/api/getcategoodPage',
				data:{
					fid,
					page,
					size
				}
			})
			 console.log( result.data.list[1],'11111' )
			 uni.hideLoading()
			 if( !result.data.list[1] ){
				 this.isMore = false 
				 return
			 }
			 
			result.data.list[1].forEach(item=>{
				item.img = apiurl + item.img
			})
			this.productsList = this.productsList.concat(result.data.list[1])
			
		}
	}
}
</script>

<style>
	.search{
		margin: 50rpx;
		height: 80rpx;
		background-color: #f26b11;
		border-radius: 80rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	icon{
		margin:0 10rpx 0 250rpx;
	}
	.placeholder{
		color: white;
		font-size: 25rpx;
	}
	.row{
		position: relative;
		margin: 10rpx 20rpx;
		height: 330rpx;
		border-bottom: 1rpx solid #AAAAAA;
	}
	image{
		position: absolute;
		top: 0;
		left:10rpx;
		width: 160rpx;
	}
	.info{
		height: 85%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 200rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		font-size: 25rpx;
	}
	.info text:nth-of-type(2){
		color: red;
	}
	.info text:nth-of-type(3){
		font-size: 20rpx;
		color: #AAAAAA;
	}
	.tishi{
		line-height: 200rpx;
		text-align: center;
		font-size: 40rpx;
		color: #006699;
	}
</style>